<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="head">
		<script type="text/javascript">
            function changeOuterControlType(v){
            	var canvasObj = flowModelTest.flowChart;
            	if(canvasObj){
            		var ctrlType = v;
            		if(ctrlType.indexOf("inner:") == 0){
            			if(ctrlType == 'inner:dealCreateHop'){
	            			var methodName = ctrlType.substring(6);
	            			if(methodName == "dealCreateHop"){
	            				var flow = canvasObj.getChildCanvasByIndex(0);
	            				jQuery.extend(flow.config.defaultAttributes.onInitHop,{
	            					arrowStartType : "",
	            					arrowEndType : "default",
	            					lineType : "solid",
	            					onDblClick : "dblClickHop"
	            				});
	            			}
	            		}
            		}
            		canvasObj.setOuterControl(true,ctrlType);
            		canvasObj.redraw();
            	}
            }

            function deleteSelectedElFromOutset(){
            	var canvasObj = flowModelTest.flowChart;
            	if(canvasObj &amp;&amp; canvasObj.childCanvas){
            		var flow = canvasObj.getChildCanvasByIndex(0);
           			flow.deleteSelectedEl();
            		canvasObj.redraw();
            	}
            }

            function saveFromOutset(){
            	var canvasObj = flowModelTest.flowChart;
            	if(canvasObj &amp;&amp; canvasObj.childCanvas){
            		var flow = canvasObj.getChildCanvasByIndex(0);
            		console.log(flow.getElsValue());
            	}
            }

            function changeHopStyle(startStyle, endStyle){
            	var canvasObj = flowModelTest.flowChart;
            	if(canvasObj &amp;&amp; canvasObj.childCanvas){
            		var flow = canvasObj.getChildCanvasByIndex(0);
            		flow.changeSelectedHopStyle(startStyle, endStyle);
            		canvasObj.redraw();
            	}
            }

            function hopContext(aa,bb,cc){
	            console.log(aa);
	            console.log(bb);
	            console.log(cc);
            }

            function hopDblclick(aa,bb,cc){
            	console.log(aa);
	            console.log(bb);
	            console.log(cc);
            }

            function stepContent(aa,bb,cc){
            	console.log(aa);
	            console.log(bb);
	            console.log(cc);
            }

            function stepDblclick(aa,bb,cc){
            	console.log(aa);
	            console.log(bb);
	            console.log(cc);
            }
    	</script>
	</ui:define>
	
    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">Flow Chart</h1>
        <div class="entry">
            <p>FlowChart is created with a FlowChartModel.</p>
            
            <p><b>Note: this page works well in firefox,and IE6,7,8, but seems like some bugs in IE9.</b></p>
            
            <p>Operations:</p>
            
            <p>
            The step refers to the image icons.<br/>
            The hop refers to the line between two steps.<br/>
            1.When first open this page or click "Clean Opera" button, the edit area enters into normal state. <br/>
            	- You can move the steps and hops by mouse drag. <br/>
            	- You can add a join-block in hop by mouse drag the hop.<br/>
            	- You can select steps or hops by click them, and click them again or click blank area cancel select state.<br/>
            	- When a hop in select state, you can delete the join-block by double-click it.<br/>
            2.When click "Move" button, the edit area enters into move state, you can move the whole area.<br/>
            3.When click "Line to" button, you can connect two steps by click the first step.<br/>
            	- Note: You can control which steps can be start lines, in this example, the "test" step can start lines, but the "test2" step only can end lines.<br/>
            4.Same other function, as select line style and arrow style, zoom in, zoom out etc.<br/>
            </p>
            
			
			<h:form>
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton type="button" value="Clean Opera" image="ui-icon-document" 
                        	onclick="changeOuterControlType('')"/>
                        <p:commandButton type="button" value="Move" image="ui-icon-arrow-4"
                        	onclick="changeOuterControlType('screenMove')"/>
                        <p:commandButton type="button" value="Don't Edit" image="ui-icon-circle-minus"
                        	onclick="changeOuterControlType('notMove')"/>
                        <p:commandButton type="button" value="Line To" image="ui-icon-arrowthick-1-ne"
                        	onclick="changeOuterControlType('inner:dealCreateHop')"/>

                        <p:separator />

                        <p:commandButton type="button" title="Part Magnify" image="ui-icon-search"
                        	onclick="changeOuterControlType('partMagnify')"/>
                        <p:commandButton type="button" title="Zoom In" image="ui-icon-zoomin"
                        	onclick="changeOuterControlType('magnify')"/>
                        <p:commandButton type="button" title="Zoom Out" image="ui-icon-zoomout"
                        	onclick="changeOuterControlType('lessen')"/>
                    
                    	<p:separator />

						<p:commandButton type="button" title="Delete" image="ui-icon-trash"
							onclick="deleteSelectedElFromOutset()"/>
                        <p:commandButton type="button" title="Save" image="ui-icon-disk"
                        	onclick="saveFromOutset()"/>
                        	
                        <p:menuButton value="Change Hop Style">
                            <p:menuitem value="Circularity" onclick="changeHopStyle(null,'circularity');" />
                            <p:menuitem value="Simple" onclick="changeHopStyle(null,'simple');" />
                            <p:menuitem value="Normal" onclick="changeHopStyle(null,'normal');" />
                            <p:menuitem value="Style1" onclick="changeHopStyle('circularity','circularity');" />
                        </p:menuButton>
                        
                    </p:toolbarGroup>

                </p:toolbar>
                
                <p:flowChart widgetVar="flowModelTest" width="650" height="400" value="#{chartBean.flowModel}" />
            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="chartFlow.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
	&lt;p:toolbar&gt;
        &lt;p:toolbarGroup align="left"&gt;
            &lt;p:commandButton type="button" value="Clean Opera" image="ui-icon-document" 
            	onclick="changeOuterControlType('')"/&gt;
            &lt;p:commandButton type="button" value="Move" image="ui-icon-arrow-4"
            	onclick="changeOuterControlType('screenMove')"/&gt;
            &lt;p:commandButton type="button" value="Don't Edit" image="ui-icon-circle-minus"
            	onclick="changeOuterControlType('notMove')"/&gt;
            &lt;p:commandButton type="button" value="Line To" image="ui-icon-arrowthick-1-ne"
            	onclick="changeOuterControlType('inner:dealCreateHop')"/&gt;

            &lt;p:separator /&gt;

            &lt;p:commandButton type="button" title="Part Magnify" image="ui-icon-search"
            	onclick="changeOuterControlType('partMagnify')"/&gt;
            &lt;p:commandButton type="button" title="Zoom In" image="ui-icon-zoomin"
            	onclick="changeOuterControlType('magnify')"/&gt;
            &lt;p:commandButton type="button" title="Zoom Out" image="ui-icon-zoomout"
            	onclick="changeOuterControlType('lessen')"/&gt;
              
            &lt;p:separator /&gt;

			&lt;p:commandButton type="button" title="Delete" image="ui-icon-trash"
				onclick="deleteSelectedElFromOutset()"/&gt;
            &lt;p:commandButton type="button" title="Save" image="ui-icon-disk"
            	onclick="saveFromOutset()"/&gt;
            
        &lt;/p:toolbarGroup&gt;

    &lt;/p:toolbar&gt;
	&lt;p:flowChart value="\#{chartBean.flowModel}" /&gt;
&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="ChartBean.java">
            <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.model.chart.flow.FlowChartModel;
import org.primefaces.model.chart.flow.FlowDefaultAttributes;
import org.primefaces.model.chart.flow.FlowHop;
import org.primefaces.model.chart.flow.FlowStep;
import org.primefaces.model.chart.flow.hop.SysArrowType;
import org.primefaces.model.chart.flow.hop.SysLineType;
import org.primefaces.model.chart.flow.step.PictureStep;
import org.primefaces.model.chart.flow.util.FlowGraphHelper;

public class ChartBean implements Serializable {

    private FlowChartModel flowModel;

	public ChartBean() {
        createFlowChartModel();
	}

    public FlowChartModel getFlowModel() {
		return flowModel;
	}

    private void createFlowChartModel() {
		flowModel = FlowGraphHelper.createFlowChartModel();
		
		FlowDefaultAttributes defaultAttributes = flowModel
				.getDefaultAttributes();
		FlowHop onInitHop = FlowGraphHelper.createHop();
		onInitHop.addAttribute(FlowHop.ARROW_END_TYPE, SysArrowType.DEFAULT
				.getName());
		onInitHop.addAttribute(FlowHop.TEXT_STYLE, "green");
		onInitHop.addAttribute(FlowHop.ON_CONTEXT_MENU,
				"hopContext(canvasObj,flowObj,this)");
		onInitHop.addAttribute(FlowHop.ON_DBLCLICK,
				"hopDblclick(canvasObj,flowObj,this)");

		FlowStep onInitStep = new FlowStep() {

			@Override
			public String getType() {
				return "";
			}

			@Override
			public JSONObject toJSON() {
				try {
					JSONObject jo = super.toJSON();
					jo.put(PictureStep.S_WIDTH, 32);
					jo.put(PictureStep.S_HEIGHT, 32);
					return jo;
				} catch (JSONException e) {
				}
				return null;
			}
		};
		onInitStep.addAttribute(FlowStep.ON_CONTEXT_MENU,
				"stepContent(canvasObj,flowObj,this)");
		onInitStep.addAttribute(FlowStep.ON_DBLCLICK,
				"stepDblclick(canvasObj,flowObj,this)");
		defaultAttributes.setOnInitStep(onInitStep);
		defaultAttributes.setOnInitHop(onInitHop);
		flowModel.setDefaultAttributes(defaultAttributes);
		
		
		// init steps and hops, then they will display in screen.
		FlowStep fs1 = FlowGraphHelper
				.createStep(FlowStep.SYS_FLOW_STEP_TYPE_PREFIX + "picture");
		fs1.setId("s1");
		fs1.addAttribute(PictureStep.D_X, "170");
		fs1.addAttribute(PictureStep.D_Y, "100");
		fs1.addAttribute(PictureStep.B_TEXT, "test");
		fs1.addAttribute(PictureStep.S_IMG_SRC, "../images/cars/Audi.jpg");
		fs1.addAttribute(PictureStep.PROVIDER, "test");

		FlowStep fs2 = FlowGraphHelper
				.createStep(FlowStep.SYS_FLOW_STEP_TYPE_PREFIX + "picture");
		fs2.setId("s2");
		fs2.addAttribute(PictureStep.D_X, "350");
		fs2.addAttribute(PictureStep.D_Y, "100");
		fs2.addAttribute(PictureStep.B_TEXT, "test2");
		fs2.addAttribute(PictureStep.S_IMG_SRC, "../images/cars/BMW.jpg");
		fs2.addAttribute(PictureStep.ACCEPT, "test");

		FlowHop h = FlowGraphHelper.createHop();
		h.setFromEl(fs1);
		h.setToEl(fs2);
		h
				.addAttribute(FlowHop.ARROW_START_TYPE, SysArrowType.DEFAULT
						.getName());
		h.addAttribute(FlowHop.ARROW_END_TYPE, SysArrowType.SIMPLE.getName());
		h.addAttribute(FlowHop.LINE_TYPE, SysLineType.DOTTED.getName());
		h.createId();

		flowModel.getElementSet().addStep(fs1);
		flowModel.getElementSet().addStep(fs2);

		flowModel.getElementSet().addHop(h);
	}
}
            </pre>
                </p:tab>
            </p:tabView>
           

        </div>



    </ui:define>
</ui:composition>
